<template>
  <div v-show="isShow" class="change-modal">
    <section v-if="modalType !== 'addStaff'" class="panel">
      <h1>{{title}}</h1>
      <input type="text" :maxlength="maxLength" v-model="inputName" placeholder="请输入">
      <ul class="button-group">
        <li class="btn" @click="cancel">取消</li>
        <li class="btn" @click="handleSubmit">确定</li>
      </ul>
    </section>
    <section v-else class="panel">
      <h1>{{title}}</h1>
      <input type="text" :maxlength="maxLength" v-model="inputName" placeholder="请输入">
      <input type="tel" maxlength="11" v-model="inputMobile" placeholder="请输入电话">
      <ul class="button-group">
        <li class="btn" @click="cancel">取消</li>
        <li class="btn" @click="handleSubmit">确定</li>
      </ul>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import {outreachGroupComputed, outreachGroupMethods} from '@state/helpers'
  const COMPONENT_NAME = 'CHANGE_MODAL'

  export default {
    name: COMPONENT_NAME,
    computed: {
      ...outreachGroupComputed,
      inputName: {
        get() {
          return this.name
        },
        set(val) {
          this.setName(val)
        }
      },
      inputMobile: {
        get() {
          return this.mobile
        },
        set(val) {
          this.setMobile(val)
        }
      }
    },
    methods: {
      ...outreachGroupMethods,
      async handleSubmit() {
        try {
          await this[this.useType]()
          this.submit()
        } catch (e) {
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@design"

  .change-modal
    fill-box(fixed)
    background :rgba(0,0,0,0.5)
    display :flex
    align-items :center
    justify-content :center
    .panel
      background :#fff
      h1
        padding :20px
      input
        margin :20px
        height :40px
        line-height :@height
      .button-group
        padding :20px
        display :flex
        align-items :center
        justify-content :flex-end
        .btn
          height :30px
          width :60px
          text-align :center
          line-height :@height
          border :1px solid $color-line
          margin-right :10px
</style>
